<template>
  <div id="register-page" style="color: #EFEFEF">
    <div class="page-title page-title-red" :style="{
      top:(this.getSafeArea().top)+'px'
    }">
      <div id="back-button"  @click="$router.back()" v-if="$route.query.from!=='app'">
        <i href="javascript:void(0)" class="el-icon-arrow-left"></i>
      </div>
      <span>可可商城用户注册</span>
    </div>
    <div class="top-box">
      <div id="logo-box"></div>
      <div class="c"></div>
    </div>
    <el-form class="form register-form" label-width="90px":model="form" :rules="rules" size="medium" ref="ruleForm">
      <el-form-item label="手机号" prop="username">
        <el-col :span="18">
          <el-input
            placeholder="请输入 手机号"
            v-model.trim="form.username"
            @keyup.enter.native="submit"
            clearable>
          </el-input>
        </el-col>
      </el-form-item>
      <el-form-item label="昵称" prop="nickname">
        <el-col :span="18">
          <el-input
            placeholder="请输入 昵称"
            v-model.trim="form.nickname"
            @keyup.enter.native="submit"
            clearable>
          </el-input>
        </el-col>
      </el-form-item>
      <el-form-item label="性别" prop="sex">
        <el-col :span="18">
          <el-select v-model="form.sex">
            <el-option
              v-for="(name,index) in ['男','女']"
              :key="index"
              :label="name"
              :value="name">
            </el-option>
          </el-select>
        </el-col>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-col :span="18">
          <el-input
            type="password"
            placeholder="请输入 密码"
            v-model="form.password"
            @keyup.enter.native="submit"
            clearable>
          </el-input>
        </el-col>
      </el-form-item>
      <el-form-item label="确认密码" prop="password">
        <el-col :span="18">
          <el-input
            type="password"
            placeholder="请输入 确认密码"
            v-model="form.rePassword"
            @keyup.enter.native="submit"
            clearable>
          </el-input>
        </el-col>
      </el-form-item>
      <el-form-item label="验证码" prop="mobileVerifyCode">
        <el-col :span="14">
          <el-input
            placeholder="请输入 手机验证码"
            v-model.trim="form.mobileVerifyCode"
            @keyup.enter.native="submit"
            clearable>
          </el-input>
        </el-col>
        <el-col :span="8">
          <send-sms :get-mobile="getMoblie" event-type="register"/>
        </el-col>
      </el-form-item>
      <el-form-item label="邀请码" prop="invitationCode" v-show="$route.query.invitationCode && $route.query.invitationCode.length>0">
        <el-col :span="22">
          <el-input
            style="width: 150px;"
            placeholder="请输入 邀请码"
            v-model="form.invitationCode"
            @keyup.enter.native="submit"
            clearable>
          </el-input>
        </el-col>
      </el-form-item>
    </el-form>

    <div style="background: #FFFFFF">
      <div style="color: #2e8cf8; line-height: 30px; text-align: center;">
        <my-privacy-agreement :callback="setIsAgree"/>
      </div>
      <div align="center">
        <el-button type="danger" style="width: 80%; margin: 0px auto; height: 35px;" @click="submit" :disabled="!isAgree" :loading="isLoading">注 册</el-button>
      </div>
    </div>

  </div>
</template>

<script>
import SendSms from "../common/SendSms";
import MyPrivacyAgreement from '../common/MyPrivacyAgreement'

export default {
  name: "Register",
  components: {MyPrivacyAgreement, SendSms},
  mounted: function () {
    if (typeof this.CurrUser.IsLogin === 'function' && this.CurrUser.IsLogin()) {
      this.$router.push('/')
    }
    // 非开发环境,清除数据
    if (process.env.NODE_ENV === 'development') {
      // this.form.username = 'liuxh'
      // this.form.password = 'a123456'
    }
    if (this.$route.query.invitationCode){
      this.form.invitationCode=this.$route.query.invitationCode
    }

  },
  data: function () {
    return {
      isAgree:false,
      isLoading: false,
      form: {
        username: '',
        nickname:'未知',
        sex:'男',
        password: '',
        rePassword: '',
        mobileVerifyCode: '',
        invitationCode: '',
      },
      rules: {
        username: [
          {required: true, message: '请输入 手机号', trigger: ['blur','change']},
          {min: 3, message: '长度在 3 个字符以上', trigger: ['blur','change']}
        ],
        nickname: [
          {required: false, message: '请输入 昵称', trigger: ['blur','change']},
          {min: 2, max: 10, message: '长度在 2~10 个字符之间', trigger: ['blur','change']}
        ],
        password: [
          {required: true, message: '请输入 密码', trigger: ['blur','change']},
          {min: 6, message: '长度在 6 个字符以上', trigger: ['blur','change']}
        ],
        rePassword: [
          {required: true, message: '请输入 确认密码', trigger: ['blur','change']},
          {min: 6, message: '长度在 6 个字符以上', trigger: ['blur','change']}
        ],
        mobileVerifyCode: [
          {required: true, message: '请输入 验证码', trigger: ['blur','change']},
          {min: 1, max: 6, message: '验证码 填写错误', trigger: ['blur','change']}
        ],
        invitationCode: [
          {required: false, message: '请输入 邀请码', trigger: ['blur','change']},
          {min: 10, max: 20, message: '邀请码 填写错误', trigger: ['blur','change']}
        ]
      }
    }
  },
  methods: {
    setIsAgree:function (isAgree) {
      this.isAgree=isAgree
      this.$forceUpdate()
    },
    // 提交
    submit: function () {
      var $this = this
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          var params = $this.form
          if (params.password!=params.rePassword){
            return $this.$message.error("密码/确认密码 输入不一致")
          }
          params.mobile=params.username
          if (!params.invitationCode){
            delete params.invitationCode
          }
          $this.isLoading = true
          $this.MyRequest($this.ApiDoNameShop+'Public/register', params, function (data) {
            $this.isLoading = false
            $this.$message.success("注册成功")
            setTimeout(function () {
              $this.$router.push({
                name: 'Login'
              })
            },500)
          }, function (msg) {
            $this.isLoading = false
            $this.$message.error(msg)
            // $this.form.password = ''
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    // 重置表单
    resetForm() {
      this.$refs.ruleForm.resetFields()
    },
    register: function () {
      this.$alert('请联系向: 623862474@qq.com 发送邮件进行注册。')
    },
    getMoblie: function () {
      return this.form.username
    }
  }
}
</script>

<style scoped>

</style>
